@import "@/common/styles/colors"

.provider-dialog-content
  display: flex
  margin: 1rem 0.5rem
  user-select: none
  flex-direction: column

  .provider-header
    display: flex
    gap: 1rem

  .provider-item
    display: flex
    align-items: center
    padding: 0.3rem 0.5rem
    gap: 0.5rem
    border-radius: 0.8rem
    border: 2px solid $light-gray
    color: $subtext
    cursor: pointer

    img
      width: 2.5rem
      height: 2.5rem

    h3
      margin: 0

    &:hover
      background-color: $darker-gray

  .provider-item-active
    background-color: $light-gray

    &:hover
      background-color: $light-gray

  .provider-content
    display: flex
    flex-direction: column
    margin-top: 1rem


  .provider-setting
    display: flex
    gap: 1rem
    align-items: center
    justify-content: space-between

    .provider-input
      width: 20rem
      box-sizing: border-box
      margin-top: 0.5rem
      margin-bottom: 0.5rem
      font-size: 1.3rem

    h3
      color: $subtext

  .cloudflare-provider-info
    color: $subtext
    text-align: center

.provider-dialog-footer
  display: flex
  align-items: center
  justify-content: space-between

  .provider-license-box
    display: flex
    align-items: center
    gap: 0.5rem

    input
      border: 2px solid $light-gray

    .cb-error
      border-color: $red

    label
      color: $subtext
      max-width: 16rem
      flex: 1


@media screen and (max-width: 610px)
  .provider-dialog-content
    .provider-header
      flex-direction: column

@media screen and (max-width: 520px)
  .provider-dialog-content
    .provider-setting .provider-input
      width: 60%